<script setup>

import { ref } from 'vue'
import MainCard from './components/MainCard.vue';
// 模块用图标
import imgUrl from "@/assets/visiable.png"
import { useAuthStore, useAdminStore } from '@/stores';
import { menuListGet } from '@/api/common'
const adminStore = useAdminStore()
const authStore = useAuthStore()
// const mainAdminComponensPath = ref([])
const menuList = ref([])
const adminMenuList = ref([])
const appMenuList = ref([])
adminStore.getDeptCasList()
adminStore.getSelectList(adminStore.deptList)
// console.log(mainAdminComponensPath.value)
const getMenuList = async () => {
  await menuListGet(authStore.authComponentList).then(res => {
    menuList.value = res.data.data
    // console.log(menuList.value)
  })
  adminMenuList.value = menuList.value.filter((item) => {
    return item.component.startsWith('/admin')
  })
  adminMenuList.value.sort((item1, item2) => item1.sort - item2.sort)
  appMenuList.value = menuList.value.filter((item) => {
    return item.component.startsWith('/app')
  })
}
getMenuList()

// console.log(authStore.authComponentList)



// 折叠面板
const groupVisable1 = ref(true)
const groupVisable2 = ref(true)
const groupVisable3 = ref(true)
const groupVisable4 = ref(true)


// const onClick = () => {
//   console.log("click");
// }
</script>

<template>
  <div class="mainPage">
    <MainContainerHeader>工业互联网平台</MainContainerHeader>
    <el-container>
      <el-main class="main">
        <!-- 可视化页面 -->
        <div class="visablePage page-group">
          <h3 @click="groupVisable1 = !groupVisable1"><el-icon color="#337ecc">
              <PictureFilled />
            </el-icon>
            可视化页面<el-icon v-show="!groupVisable1" class="title-icon">
              <CaretRight />
            </el-icon></h3>
          <el-collapse-transition>
            <div v-show="groupVisable1" class="visable-groups">
              <main-card class="visable-item" @click="$router.push('/wuziqi')" :cardUrl="imgUrl">五子棋</main-card>
            </div>
          </el-collapse-transition>

        </div>
        <!-- 能力平台 -->
        <div class="ability-platform  page-group">
          <h3 @click="groupVisable2 = !groupVisable2"><el-icon color="#337ecc">
              <Menu />
            </el-icon>
            能力平台<el-icon v-show="!groupVisable2" class="title-icon">
              <CaretRight />
            </el-icon></h3>
          <el-collapse-transition>
            <div v-show="groupVisable2" class="visable-groups">
              <MainCard v-for="n in 3" :key="n" :cardUrl="imgUrl" class="visable-item">{{ n }}</MainCard>
            </div>
          </el-collapse-transition>
        </div>
        <!-- 应用平台 -->
        <div class="application-platform  page-group">
          <h3 @click="groupVisable3 = !groupVisable3"><el-icon color="#337ecc">
              <Histogram />
            </el-icon>
            应用平台<el-icon v-show="!groupVisable3" class="title-icon">
              <CaretRight />
            </el-icon></h3>
          <el-collapse-transition>
            <div v-show="groupVisable3" class="visable-groups">
              <main-card class="visable-item" v-for="(item) in appMenuList" :key="item.id" :card-url="item.icon"
                @click="$router.push(item.component)">{{ item.name }}</main-card>
            </div>
          </el-collapse-transition>
        </div>
        <!-- 平台设置 -->
        <div class="Platform-setting  page-group" v-show="adminMenuList.length">
          <h3 @click="groupVisable4 = !groupVisable4"><el-icon color="#337ecc">
              <Tools />
            </el-icon>
            平台设置<el-icon v-show="!groupVisable4" class="title-icon">
              <CaretRight />
            </el-icon></h3>
          <el-collapse-transition>
            <div class="visable-groups" v-show="groupVisable4">
              <main-card class="visable-item" v-for="(item) in adminMenuList" :key="item.sort" :cardUrl=item.icon
                @click="$router.push(item.component)">{{ item.name }}</main-card>
            </div>
          </el-collapse-transition>
        </div>
        <!-- 休闲游戏 -->
        <!-- <div>
          <h3 @click="groupVisable4 = !groupVisable4"><el-icon color="#337ecc">
              <Tools />
            </el-icon>
            休闲游戏<el-icon v-show="!groupVisable4" class="title-icon">
              <CaretRight />
            </el-icon></h3>
          <el-collapse-transition>
            <div>
              <WuZiQi></WuZiQi>
            </div>
          </el-collapse-transition>
        </div> -->

      </el-main>
    </el-container>

  </div>
</template>

<style scoped lang="less">
.header {
  display: flex;
  height: 70px;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background-color: #337ecc;
  color: white
}

.user {
  display: flex;
  align-items: center;
  outline: none;

  .user-name {
    color: white;
    margin: 0 10px;
  }

  .el-icon--right:hover {
    rotate: 90deg;
  }
}

.mainPage {

  h3 {
    display: flex;
    margin: 20px 0;
    padding: 0;
    height: 30px;
    // line-height: 30px;
    align-items: center;
    gap: 5px;
  }

  .main {
    padding: 20px 20px;

    .page-group {
      display: flex;
      flex-direction: column;

      .visable-groups {
        padding: 0 60px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }
    }

    .visable-item {
      cursor: pointer;
    }
  }

  .btn {
    width: 200px;
    margin-top: 20px
  }
}
</style>
